html {
  /* HTML document的默认大小 16px, rem是只相对于根元素html，即只需要设置根元素的font-size */
  /* 16px * 62.5% = 10px 对应 1rem = 10px */
  /* 所以 12px = 1.2rem。px与rem的转换通过10就可以得来，很方便 */
  font-size: 62.5%;
}

/* 桌面端优先的 rem + @media查询 实现等比缩放的移动端适配方案 */
/* 爬坑总结：自己也试了试rem方案，确实能实现等比缩放，但是对于像element-plus这种组件库内部使用的px单位的样式，需要进行手动重写或postcss转换为rem，代价有点大，并且最终在其他终端呈现的效果并不完美，最好是能够对移动端进行针对性的ui、ue设计。说白了，等比缩放并不是响应方案，是一竹竿偷懒的方案，而且不只是前端在偷懒，而是交互，产品，设计一起在偷懒的方案。目前项目中继续使用px，并设置min-width=1280px，可适配分辨率较低的笔记本电脑，手机浏览虽然会出现横向滚动条，但是布局并没有未知的问题。 */
/* @media only screen and (min-width: 320px) {
  html {
    font-size: 15.625% !important
  }
}

@media only screen and (min-width: 640px) {
  html {
    font-size: 31.25% !important;
  }
}

@media only screen and (min-width: 960px) {
  html {
    font-size: 46.875% !important;
  }
}

@media only screen and (min-width: 1280px) {
  html {
    font-size: 62.5% !important;
  }
} */

/* 自定义主题切换( :root 和 html 等价，都可以使用以下js代码修改变量值)
 * document.documentElement.style.setProperty('--fetm-theme-color', '#ff0000');
*/
:root {
  /* 背景颜色 */
  --fetm-bg-white: rgb(255, 255, 255);
  --fetm-bg-white-70: rgba(255, 255, 255, 0.7);
  --fetm-bg-white-deep: #f3f4f6;
  /* 背景颜色 反转 */
  --fetm-bg-black: rgb(42, 42, 42);
  --fetm-bg-black-70: rgba(42, 42, 42, 0.7);
  --fetm-bg-black-deep: rgb(24, 24, 24);

  /* 其他颜色 */
  --fetm-color-primary: #325cff;
  --fetm-color-highlight: #00ffff;

  /* 文字大小 */
  --fetm-font-size-base: 1.6rem;
}

/* 定制化设置element-plus变量 */
* {
  --el-color-primary: var(--fetm-color-primary) !important;
  --el-font-size-base: var(--fetm-font-size-base) !important;
  --el-form-label-font-size: var(--fetm-font-size-base) !important;
}

/* 浅色模式 */
html:not(.dark) {
  --fetm-current-color: #000;
  --fetm-current-bg-color: var(--fetm-bg-white);
  --fetm-current-bg-color-70: var(--fetm-bg-white-70);
  --fetm-current-bg-color-deep: var(--fetm-bg-white-deep);
}

/* 深色模式 */
html.dark {
  --fetm-current-color: #fff;
  --fetm-current-bg-color: var(--fetm-bg-black);
  --fetm-current-bg-color-70: var(--fetm-bg-black-70);
  --fetm-current-bg-color-deep: var(--fetm-bg-black-deep);
}

/* 灰度模式 */
html.gray-model {
  filter: grayscale(100%);
}

/* 色弱模式 */
html.color-weak-model {
  filter: invert(80%);
}

body {
  background-color: var(--fetm-current-bg-color);
  font-size: var(--fetm-font-size-base);
  color: var(--fetm-current-color);
}
